<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>咸阳师范学院内页布局</title>
    <style>

        #all{
            width: 960px;
            margin: 0 auto;
        }
        #logo {
            background-image: url("./image/logo.jpg");
            width: 410px;
            height: 100px;
            float: left;
        }

        #nav{
            background-image: url("./image/dht.jpg");
            width: 550px;
            height: 100px;
            float: left;
        }

        #banner{
            background-image: url("./image/banner.jpg");
            width: 960px;
            height: 240px;
        }

        #leftnav{
            background-image: url("./image/left.jpg");
            width: 242px;
            height: 468px;
            float: left;
        }
        #center{
            background-image: url("./image/right.jpg");
            width: 708px;
            height: 468px;
            float: left;
        }

        #cpright{
            background-image: url("./image/cpright.jpg");
            width: 960px;
            height: 24px;
            float: left;
        }
    </style>
</head>
<body>
<!--
使用浮动定位方式来实现类似于咸阳师范学院网站内页的布局，具体要求如下：
a)	在网页文件中定义5个div，名称分别为logo、nav、leftnav、center和cpright。
b)	使用position属性为div布局。
c)	分别为top、nav、left、content和 cpright盒子中添加文字或图片。
-->
<div id="all">
    <div id="top">
        <div id="logo"></div>
        <div id="nav"></div>
        <div id="banner"></div>
    </div>

    <div id="main">
        <div id="leftnav"></div>
        <div id="center"></div>
    </div>

    <div id="cpright"></div>
</div>

</body>
</html>
